<template>
	<gui-page ref="guipage" :fullPage="true" :isLoading="pageLoading" :apiLoadingStatus="apiLoadingStatus"
		:customFooter="isHideTabbar" :refresh="isHideTabbar" @reload="reload" :loadmore="isHideTabbar" @loadmorefun="loadData">
		<template v-slot:gFixedTop v-if="isHideTabbar">
			<gui-a-header title="人才列表"></gui-a-header>
			<view class="bgfff" id="header" >
				<view class="search flex-ac-jb">
					<view class="flex1">
						<gui-search2 :customClass="['bgfff','border']" :kwd="queryData.postName" @confirm="confirm"
							@clear="clear" @inputting="inputting" height="53rpx" placeholder="输入关键字，搜索您想要的"
							placeholderClass="plStyle"></gui-search2>
					</view>
					<button class="saveBtn" @click="showScreen">筛选</button>
				</view>
				<view class="shai flex-ac-row f20">
					<text class="la">已选条件：</text>
					<text class="la c999" v-if="queryShow.length <= 0">请选择</text>
					<scroll-view :scroll-x="true" class="gui-flex1" style="overflow: hidden;">
						<view class="row gui-flex">
							<view class="label-item colorBlue" v-for="(item,index) in queryShow" :key="item.dictValue">{{item.dictLabel}}</view>
						</view>
					</scroll-view>
					<view class="tool colorRed flex-ac-row" @tap="clearCheck">
						<text class="tool-text">清除</text>
						<text class="tool-text">重新筛选</text>
					</view>
				</view>
			</view>
		</template>
		<template v-slot:gBody>
			<view class="pos">
				<ScreenCom v-if="screenComShow" @change="queryChange" @confirm="confirmQuery" :mainHeight="mainHeight" ref="screenComRef">
				</ScreenCom>
			</view>
			<CurrentPage v-if="isHideTabbar" ref="currentPage" :queryOther="queryData" @pageChange="pageChange"></CurrentPage>
			<CurrentZpPage v-if="!isHideTabbar" ref="CurrentZpPage"></CurrentZpPage>
		</template>
		<template v-slot:gFooter>
			<!-- 普通模式 -->
			<gui-flex :customClass="['gui-footer', 'gui-footer-border', 'bgfff']" direction="row" :wrap="false"
				alignItems="center" justifyContent="center">
				<view class="gui-footer-icon-buttons" @tap="navChange(0)">
					<image class="tab_icon" v-if="tabIndex != 0" src="@/static/tabbar/index.png" mode="widthFix">
					</image>
					<image class="tab_icon" v-if="tabIndex == 0" src="@/static/tabbar/index_select.png" mode="widthFix">
					</image>
					<text :class="[
								tabIndex == 0 ? 'gui-primary-color' : 'gui-color-gray', 
								'gui-icons', 
								'gui-footer-icon-buttons-text', 
								'gui-block'
							]">首页</text>
				</view>
				<view class="gui-footer-icon-buttons" @tap="navChange(1)">
					<image class="tab_icon" v-if="tabIndex != 1" src="@/static/tabbar/talents.png" mode="widthFix">
					</image>
					<image class="tab_icon" v-if="tabIndex == 1" src="@/static/tabbar/talents_select.png"
						mode="widthFix"></image>
					<text :class="[
								tabIndex == 1 ? 'gui-primary-color' : 'gui-color-gray', 
								'gui-icons', 
								'gui-footer-icon-buttons-text', 
								'gui-block'
							]">人才</text>
				</view>
				<view class="gui-footer-icon-buttons" @tap="navChange(2)">
					<image class="tab_icon" v-if="tabIndex != 2" src="@/static/tabbar/mine.png" mode="widthFix"></image>
					<image class="tab_icon" v-if="tabIndex == 2" src="@/static/tabbar/mine_select.png" mode="widthFix">
					</image>
					<text :class="[
								tabIndex == 2 ? 'gui-primary-color' : 'gui-color-gray', 
								'gui-icons', 
								'gui-footer-icon-buttons-text', 
								'gui-block'
							]">公司</text>
				</view>
			</gui-flex>
		</template>
	</gui-page>
</template>

<script setup>
	import graceJS from "@/Grace6/js/grace.js"
	import CurrentPage from '@/components/Curren-page/Curren-page.vue'
	import CurrentZpPage from '@/components/Curren-zp-page/Curren-zp-page.vue'
	import ScreenCom from '@/components/Screen-com/Screen-com.vue'
	import {
		ref,
		reactive,
		inject
	} from 'vue';
	const $u = reactive(inject('$u'))

	import {
		storeToRefs
	} from 'pinia'
	import {
		useUserStore
	} from '@/stores/user.js'
	const guipage = ref(null);
	const mainHeight = ref(200);
	const screenComRef = ref(null)
	const currentPage = ref(null)
	const store = useUserStore()
	const screenComShow = ref(false)
	const {
		isHideTabbar
	} = storeToRefs(store)
	
	const queryShow = ref([])
	const queryData = ref({
		industry: '',
		postName: '',
		addressName: '',
		workStatus: '',
		workTime: ''
	})

	const tabIndex = ref(1)

	const navChange = (index) => {
		// tabIndex.value = index;
		if (index == 0) {
			$u.to(`/pages/index/index`, 'switchTab')
		} else if (index == 2) {
			$u.to(`/pages/mine/mine`, 'switchTab')
		}
	}

	const pageChange = (data) => {
		console.log(data);
		let {
			value
		} = data;
		if (value == 'stoploadmore') {
			guipage.value.stoploadmore();
		}
		if (value == 'nomore') {
			guipage.value.nomore();
		}
		if (value == 'endReload') {
			guipage.value.endReload();
		}
	}

	const loadData = () => {
		setTimeout(() => {
			currentPage.value.loadRc();
		}, 500)
	}

	const reload = () => {
		setTimeout(() => {
			currentPage.value.reload();
		}, 500)
	}

	const queryChange = (data) => {
		console.log(data.value);
		queryShow.value = data.value;
	}
	
	const clearCheck = () => {
		screenComRef.value.clearCheck();
		queryData.value.industry = '';
		queryData.value.addressName = '';
		queryData.value.workStatus = '';
		queryData.value.workTime = '';
		reload();
	}
	
	const showScreen = () => {
		screenComRef.value.open()
	}
	
	const inputting = (e) => {
		queryData.value.postName = e;
	}
	const confirm = (e) => {
		console.log(e);
		queryData.value.postName = e;
		reload(false);
	}
	const clear = (e) => {
		queryData.value.postName = '';
		reload(false);
	}
	
	const confirmQuery = () => {
		let addressName = [];
		let industry = [];
		let workTime = [];
		let workStatus = [];
		
		queryShow.value.forEach(item => {
			if(item.key == 'addressName') {
				addressName.push(item.dictValue)
			}
			if(item.key == 'industry') {
				industry.push(item.dictValue)
			}
			if(item.key == 'workTime') {
				workTime.push(item.dictValue)
			}
			if(item.key == 'workStatus') {
				workStatus.push(item.dictValue)
			}
		})
		queryData.value.industry = industry.join(',')
		queryData.value.addressName = addressName.join(',')
		queryData.value.workStatus = workStatus.join(',')
		queryData.value.workTime = workTime.join(',')
		reload();
	}

	setTimeout(() => {
		graceJS.getRefs(guipage, 0, (ref) => {
			ref.getDomSize('guiPageBody', (e) => {
				mainHeight.value = (e.height - uni.upx2px(10));
				screenComShow.value = true;
			});
		});
	}, 1000)
</script>

<style lang="scss">
	.pos {
		position: relative;
	}

	.search {
		padding: 28rpx 14rpx 24rpx 36rpx;

		.border {
			border: 1px solid #ccc;
		}

		.saveBtn {
			width: 97rpx;
			height: 53rpx;
			margin-left: 10rpx;
			font-size: 20rpx;
		}
	}

	.shai {
		padding: 20rpx 10rpx 14rpx 36rpx;
		height: 40rpx;

		.la {
			position: relative;
			top: -4rpx;
		}

		.label-item {
			padding: 6rpx 14rpx;
			background: #F5F5F5;
			border-radius: 14rpx;
			margin-left: 10rpx;
			margin-bottom: 10rpx;
			white-space: nowrap;
		}

		.tool {
			position: relative;
			top: -4rpx;

			.tool-text {
				position: relative;
				padding: 6rpx 15rpx;

				&:last-child::before {
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 1px;
					height: 24rpx;
					background: #D50000;
				}
			}
		}
	}

	.list {
		padding: 0 36rpx;
		margin-top: 10rpx;
	}
</style>